<#import "/layout.html" as c>
<#import "/list_layout.html" as list>
<@c.html title="Index">
    <!-- ================== 开始基础CSS样式引入 ================== -->
    <link type="text/css" href="${publicRoot}plugins/jquery-ui/themes/base/minified/jquery-ui.min.css"
          rel="stylesheet"/>
    <link type="text/css" href="${pluginsRoot}bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="${pluginsRoot}font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link type="text/css" href="${pluginsRoot}ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link type="text/css" href="${cssRoot}animate.min.css" rel="stylesheet"/>
    <link type="text/css" href="${cssRoot}style.min.css" rel="stylesheet"/>
    <link type="text/css" href="${cssRoot}style-responsive.min.css" rel="stylesheet"/>
    <link type="text/css" href="${cssRoot}theme/default.css" rel="stylesheet" id="theme"/>
    <link type="text/css" href="${cssRoot}style-plugins.css" rel="stylesheet"/>
    <!-- ================== 结束基础CSS样式引入 ================== -->

    <!-- ================== 开始页面所需CSS样式引入 ================== -->
    <link href="${pluginsRoot}gritter/css/jquery.gritter.css" rel="stylesheet"/>
    <!-- 表单验证 -->
    <link href="${pluginsRoot}parsley/parsley.min.css" rel="stylesheet"/>
    <!-- ================== 结束页面所需CSS样式引入 ================== -->
    <!-- 开始页面内容 -->
    <div id="content" class="content">

        <!-- 开始页头区域 -->
        <h1 class="page-header">用户 (${userName!}) 动态权益
            <small class="m-l-10">用户动态权益</small>
        </h1>
        <!-- 结束页头区域 -->

        <!-- 品种列表 begin row -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-inverse" data-no-drag="true">
                    <div class="panel-body">
                        <div style="position: relative;">
                            <input type="hidden" id="userId" value="${userId}">
                            <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;"
                                   class="mytable dt-grid table table-bordered  table-responsive">
                                <tbody>
                                <tr class="table-title dt-grid-headers ">
                                    <th class="lable ta" class="commo">静态权益</th>
                                    <th class="lable ta" class="commo">平仓盈亏</th>
                                    <th class="lable ta" class="commo">持仓盈亏</th>
                                    <th class="lable ta" class="commo">动态权益</th>
                                    <th class="lable ta" class="commo">占用保证金</th>
                                    <th class="lable ta" class="commo">下单冻结</th>
                                    <th class="lable ta" class="commo">可用资金</th>
                                    <th class="lable ta" class="commo">手续费</th>
                                    <th class="lable ta" class="commo">初始权益</th>
                                </tr>
                                <tr class="lable ta">
                                    <td id="staticInterest"></td>
                                    <td id="coverProfit"></td>
                                    <td id="holdingProfit"></td>
                                    <td id="dymicInterest"></td>
                                    <td id="useDeposit"></td>
                                    <td id="tradeFreeze"></td>
                                    <td id="useAmount"></td>
                                    <td id="fee"></td>
                                    <td id="initInterest"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <@list.html title="用户持仓" subTitle="用户持仓" alertList="" permi="sys:user:save" addBtn=false searchHint="请输入订单号搜索">
    </@list.html>

    <style type="text/css">
        .item-hover {
            background: #1a2229;
            color: #fff;
        }

        .table-title {
            background: #ffffff;
            text-align: center;
        }

        .mytable {
            color: #666;
            width: 96%;
            margin: 10px;
            background: #ffffff;
        }

        table tr {
            padding: 5px 0;
        }

        .tl {
            text-align: left;
        }

        .ta {
            text-align: center;
        }

        .mytable input {
            width: 220px;
            padding: 3px 6px;
            height: auto;
            border-radius: 5px;
            outline: none;
            border: 0;
            -webkit-appearance: none;
        }

        .mytable .lable {
            width: 100px;
            /*background: #eee;*/
        }

        .btn {
            padding-top: 1px;
            padding-bottom: 1px;
        }

        .base-info {
            max-width: 220px;
            width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
        }

        .mytable button {
            float: right;
        }

        tbody {
            padding: 1px;
        }

        select {
            min-width: 120px;
            padding: 3px 8px;
            color: #666;
            border-radius: 5px;
            outline: none;
        }

        .mytable .w25 {
            width: 25%;
        }

        .mytable .w30 {
            width: 30%;
        }

        .mytable .w45 {
            width: 45%;
        }

        .outable {
            color: #666;
            width: 35%;
            margin: 10px;
            background: #ffffff;
        }
        .outable input {
            width: 220px;
            padding: 3px 6px;
            height: auto;
            border-radius: 5px;
            outline: none;
            border: 0;
            -webkit-appearance: none;
        }

    </style>


</@c.html>

<!-- ================== 开始页面级JavaScrip调用 ================== -->
<script src="${pluginsRoot}bootstrap-wizard/js/bwizard.js"></script>
<!-- 表单checkbox项 -->
<script src="${pluginsRoot}bootstrap-switch/bootstrap-switch.min.js"></script>
<!-- 日历控件 -->
<script src="${pluginsRoot}/jquery.dtGrid/dependents/datePicker/WdatePicker.js" defer="defer"></script>
<script src="${jsRoot}user/user_hold.handle.js"></script>
<script>
        function getData(){
            var userId = $("#userId").val();
            $.ajax({
                type: 'POST',
                url: ncGlobal.adminRoot + "user/json/userdyncJson",
                dataType: "json",
                data: {
                    id: userId
                },
                success: function (data) {
                    if(data.code == 200){
                        $("#staticInterest").html(data.data.staticInterest);
                        $("#initInterest").html(data.data.initInterest);
                        $("#coverProfit").html(data.data.coverProfit);
                        $("#holdingProfit").html(data.data.holdingProfit);
                        $("#dymicInterest").html(data.data.dymicInterest);
                        $("#useDeposit").html(data.data.useDeposit);
                        $("#tradeFreeze").html(data.data.tradeFreeze);
                        $("#useAmount").html(data.data.useAmount);
                        $("#fee").html(data.data.fee);
                    }else{
                        alert(data.message);
                    }
                }
            });
        };

        setInterval(function(){
            getData();
        }, 1000);
</script>